<template>
  <div class="page-dialog-info">
    <WmcDialog
      :title="title"
      :dialogVisible="dialogVisible"
      :width="width"
      @close="closeDialog"
      @handleConfirm="handleConfirm"
    >
      <template #table>
        <WmcTable :listData="dataList" v-bind="pageDialogTableConfig">
          <!-- 1.header中的插槽 -->
          <template #headerHandler>
            <el-button type="primary" @click="handleNewClick">
              添加编译器定义
            </el-button>
          </template>
          <template #handler="scope">
            <div class="handle-btns">
              <el-button
                :icon="Edit"
                size="small"
                type="primary"
                link
                @click="handleEditClick(scope.row)"
              >
                编辑
              </el-button>
              <el-button
                :icon="Delete"
                size="small"
                type="primary"
                link
                @click="handleDeleteClick(scope.row)"
                >删除</el-button
              >
            </div>
          </template>
        </WmcTable>
      </template>
    </WmcDialog>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import WmcDialog from '@/render/base-ui/dialog'
import WmcTable from '@/render/base-ui/table'
import { Edit, Delete } from '@element-plus/icons-vue'

export default defineComponent({
  components: {
    WmcDialog,
    WmcTable
  },
  props: {
    title: {
      type: String,
      default: ''
    },
    width: {
      type: String,
      default: '50%'
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    dataList: {
      type: Array,
      default: () => []
    },
    pageDialogTableConfig: {
      type: Object,
      default: () => ({})
    }
  },
  emits: ['add', 'edit', 'delete', 'close', 'handleConfirm'],
  setup(props, { emit }) {
    const closeDialog = () => {
      emit('close')
    }

    const handleConfirm = () => {
      emit('handleConfirm')
    }

    const handleNewClick = () => {
      emit('add')
    }

    const handleEditClick = (item: any) => {
      emit('edit', item)
    }

    const handleDeleteClick = (item: any) => {
      emit('delete', item.name)
    }

    return {
      Edit,
      Delete,
      closeDialog,
      handleConfirm,
      handleNewClick,
      handleEditClick,
      handleDeleteClick
    }
  }
})
</script>

<style scoped></style>
